<template>
  <div class="sheader">
    <div class="header nflex">
      <!-- 左侧 -->
      <div class="left nflex">
        <nuxt-link to="/">
          <div class="logo nflex">
            <img
              class="ilogo"
              src="../assets/images/icons/icon_logo.png"
              alt="LOGO"
            />
            <div class="royole">柔宇科技</div>
          </div>
        </nuxt-link>
        <div class="navtab nflex">
          <nuxt-link to="/" :class="['nav', { actived: $route.path == '/' }]"
            >推荐</nuxt-link
          >
          <nuxt-link
            to="/group/AllJoined"
            :class="['nav', { actived: $route.path.indexOf('group') > 0 }]"
            >圈子</nuxt-link
          >
          <a class="nav" href="https://store.royole.com/" target="_blank"
            >商城</a
          >
          <nuxt-link
            to="/cms/manager/article"
            :class="['nav', { actived: $route.path.indexOf('cms') > 0 }]"
            >我的</nuxt-link
          >
        </div>
      </div>
      <!-- 右侧 需要使用 NoSSR 标签进行包裹，以确保仅在客户端渲染，避免服务端和客户端数据不一致异常-->
      <no-ssr>
        <div class="right nflex">
          <div class="login" v-if="!loginState" @click="tlogin">
            <div class="title">登陆 / 注册</div>
          </div>
          <div
            class="post"
            v-if="loginState"
            @mouseenter="postChoseOpen"
            @mouseleave="postChoseClose"
          >
            <div class="title">发表</div>
            <div class="more" v-if="postChoseTag">
              <nuxt-link to="/publish/movement">
                <div class="onechose nflex">
                  <img
                    src="../assets/images/icons/icon_moments_normal.png"
                    alt="Feed"
                  />
                  <div>发动态</div>
                </div>
              </nuxt-link>
              <nuxt-link to="/cms/editor/article">
                <div class="onechose nflex">
                  <img
                    src="../assets/images/icons/icon_publish_normal.png"
                    alt="Info"
                  />
                  <div>发文章</div>
                </div>
              </nuxt-link>
              <nuxt-link to="/publish/question">
                <div class="onechose nflex">
                  <img
                    src="../assets/images/icons/icon_question_normal.png"
                    alt="question"
                  />
                  <div>提问题</div>
                </div>
              </nuxt-link>
              <nuxt-link to="/cms/editor/video">
                <div class="onechose nflex">
                  <img
                    src="../assets/images/icons/icon_video_normal.png"
                    alt="vlog"
                  />
                  <div>小视频</div>
                </div>
              </nuxt-link>
            </div>
          </div>
          <div
            class="user nflex"
            v-if="loginState"
            @mouseenter="logoutChoseOpen"
            @mouseleave="logoutChoseClose"
          >
            <div class="title nflex">
              <img
                src="../assets/images/icons/icon_head_default.png"
                alt="FACE"
                class="face"
              />
              <div class="name">{{ userInfo.name }}</div>
              <img
                v-if="logoutChoseTag"
                src="../assets/images/icons/icon_arrow_up.png"
                alt=">"
                class="down"
              />
              <img
                v-else
                src="../assets/images/icons/icon_arrow_down.png"
                alt=">"
                class="down"
              />
            </div>
            <div class="logout" @click="logout" v-if="logoutChoseTag">
              <div class="hlogout nflex">
                <img src="../assets/images/icons/icon_quit.png" alt="vlogout" />
                <div>退出登陆</div>
              </div>
            </div>
          </div>
          <div class="msg nflex" v-if="loginState">
            <img src="../assets/images/icons/icon_news.png" alt="MSG" />
            <div class="info">
              消息（<font>{{ userInfo.msgNum }}</font
              >）
            </div>
          </div>
          <div
            class="app nflex"
            @mouseenter="codeChoseOpen"
            @mouseleave="codeChoseClose"
          >
            <img
              src="../assets/images/icons/icon_client.png"
              alt="APP"
              class="iapp"
            />
            <div class="type">客户端</div>
            <div class="code" v-if="codeChoseTag">
              <img src="../assets/images/icons/pic_qr_code.png" alt="CODE" />
              <div>扫一扫下载柔宇社区 APP</div>
            </div>
          </div>
        </div>
      </no-ssr>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      // Post 发表 类型选择
      postChoseTag: false,
      // logout 退出登陆选择
      logoutChoseTag: false,
      // 客户端 二维码 展开
      codeChoseTag: false,
    }
  },
  created() {
    console.log(this.$route.path)
  },
  computed: {
    ...mapState(['loginState', 'userInfo']),
  },
  methods: {
    ...mapActions(['login', 'logout']),
    tlogin() {
      this.login({
        name: '蜡笔小新',
        msgNum: 8,
      })
      this.logoutChoseTag = false
    },
    postChoseOpen() {
      this.postChoseTag = true
    },
    postChoseClose() {
      this.postChoseTag = false
    },
    logoutChoseOpen() {
      this.logoutChoseTag = true
    },
    logoutChoseClose() {
      this.logoutChoseTag = false
    },
    codeChoseOpen() {
      this.codeChoseTag = true
    },
    codeChoseClose() {
      this.codeChoseTag = false
    },
  },
}
</script>

<style lang="scss" scoped>
.sheader {
  width: 100%;
  min-width: 1440px;
  height: 84px;
}

.nflex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.header {
  background-color: #ffffff;
  width: 100%;
  min-width: 1440px;
  height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  .left {
    height: 64px;
    margin-left: 5%;
    .logo {
      cursor: pointer;
      .ilogo {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
      .royole {
        font-family: SourceHanSansSC-Bold;
        font-size: 24px;
        color: #0050ff;
        font-weight: 700;
      }
    }
    .navtab {
      margin-left: 100px;
      .nav {
        opacity: 0.4;
        font-family: SourceHanSansSC-Regular;
        font-size: 14px;
        color: #000000;
        font-weight: 400;
        padding: 21px 2px 9px;
        margin: 0 20px;
        border-bottom: 3px solid #fff;
        cursor: pointer;
        &:hover {
          opacity: 1;
          color: #0050ff;
        }
        &.actived {
          opacity: 1;
          border-bottom: 3px solid #0050ff;
        }
      }
    }
  }
  .right {
    height: 64px;
    margin-right: 5%;
    .login,
    .post {
      cursor: pointer;
      height: 64px;
      margin-right: 30px;
      position: relative;
      .title {
        background: #0050ff;
        border-radius: 20px;
        color: #fff;
        padding: 5px 20px;
        font-family: SourceHanSansSC-Medium;
        font-size: 14px;
        color: #ffffff;
        font-weight: 500;
        margin-top: 18px;
      }
      .more {
        position: absolute;
        font-family: SourceHanSansSC-Regular;
        font-size: 14px;
        color: #000000;
        font-weight: 400;
        width: 102px;
        background: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        top: 64px;
        left: -15px;
        padding: 5px 0;
        .onechose {
          justify-content: center;
          padding: 8px 0;
          cursor: pointer;
          &:hover {
            background: rgba(0, 80, 255, 0.1);
          }
          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }
      }
    }
    .user {
      cursor: pointer;
      margin-right: 20px;
      font-family: SourceHanSansSC-Regular;
      font-size: 14px;
      color: #000000;
      font-weight: 400;
      position: relative;
      height: 64px;
      align-items: center;
      .face {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 12px;
      }
      .down {
        width: 16px;
        height: 16px;
        margin-left: 5px;
      }
      .logout {
        position: absolute;
        font-family: SourceHanSansSC-Regular;
        font-size: 14px;
        color: #000000;
        font-weight: 400;
        width: 116px;
        background: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        top: 64px;
        left: 0;
        cursor: pointer;
        .hlogout {
          padding: 10px 0;
          justify-content: center;
          &:hover {
            background: rgba(0, 80, 255, 0.1);
          }
          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }
      }
    }
    .msg {
      cursor: pointer;
      font-family: SourceHanSansSC-Normal;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.9);
      line-height: 20px;
      font-weight: 400;
      margin-right: 20px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
      font {
        color: red;
        margin: 0 2px;
      }
    }
    .app {
      cursor: pointer;
      font-family: SourceHanSansSC-Normal;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.9);
      line-height: 20px;
      font-weight: 400;
      position: relative;
      height: 64px;
      .iapp {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
      .code {
        position: absolute;
        top: 64px;
        left: -40px;
        width: 166px;
        background: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        cursor: pointer;
        justify-content: center;
        padding-bottom: 10px;
        img {
          width: 120px;
          height: 120px;
          margin: 23px;
        }
        div {
          opacity: 0.6;
          font-family: SourceHanSansSC-Medium;
          font-size: 12px;
          color: #000000;
          font-weight: 500;
          text-align: center;
          margin-top: -15px;
        }
      }
    }
  }
}
</style>
